<template>
  <div>
    <q-tree :nodes="folderLikeList" no-selection-unset dark ref="likeFolderTree" node-key="elf_id" label-key="name" selected-color="primary" :selected.sync="likeFolderSelected" @update:selected="handleLikeFolderSelected" :default-expand-all="true">
      <template v-slot:default-header="prop">
          <q-list dense class="full-width">
              <q-item clickable :active="prop.node.elf_id==likeFolderSelected" active-class="bg-primary" class="row items-center">
                  <q-menu @show="handleLikeSelect(prop.node.elf_id)" touch-position context-menu dark>

                      <q-list dense style="min-width: 100px">
                          <q-item v-if="prop.node.name!='全部'" clickable v-close-popup @click="handleRenameLikeFolder">
                              <q-item-section>
                                  <div class="row items-center">
                                      <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                      重命名
                                  </div>
                              </q-item-section>
                          </q-item>
                          <q-item clickable v-close-popup @click="handleCreateLikeFolder">
                              <q-item-section>
                                  <div class="row items-center">
                                      <q-icon class="q-mr-sm" name="mdi-folder-outline" />
                                      新建文件夹
                                  </div>
                              </q-item-section>
                          </q-item>
                          <q-separator dark />
                          <q-item v-if="prop.node.name!='全部'" clickable v-close-popup @click="handleDeleteLikeFolder">
                              <q-item-section>
                                  <div class="row items-center">
                                      <q-icon class="q-mr-sm" name="mdi-trash-can-outline" />
                                      删除
                                  </div>
                              </q-item-section>
                          </q-item>

                      </q-list>

                  </q-menu>

                  <q-icon :name="prop.node.icon " color="cyan-6" size="28px" class="q-mr-sm" />
                  <div class="text-weight-bold text-white">{{ prop.node.name }}</div>

              </q-item>
          </q-list>

      </template>
  </q-tree>
    <q-dialog v-model="isCreateLikeFolderDialog">
      <q-card class="bg-dark text-white">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">创建文件夹</div>
          <q-space />
          <q-btn icon="close" @click="isCreateLikeFolderDialog=false,newFolderName='文件夹'" flat round dense v-close-popup />
        </q-card-section>

        <q-card-section>
          <q-breadcrumbs  class="q-px-sm text-primary">
            <q-breadcrumbs-el v-for="item in curLikeFolderPath" :key="item.elf_id" :label="item.name"  @click="handleLikeSelect(item.elf_id)"  class="cursor-pointer"/>

        </q-breadcrumbs>
          <q-input v-model="newFolderName" dark autofocus clearable maxlength="12"></q-input>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn outline class="q-px-md" @click="submitCreateLikeFolder"> 创建</q-btn>
        </q-card-actions>
      </q-card>


    </q-dialog>
    <q-dialog v-model="isRenameLikeFolderDialog">
      <q-card class="bg-dark text-white">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">重命名</div>
          <q-space />
          <q-btn icon="close" @click="isRenameLikeFolderDialog=false" flat round dense v-close-popup />
        </q-card-section>

        <q-card-section>
          当前：{{ curLikeFolder.name }}
          <q-input v-model="renameFolderName" dark autofocus clearable maxlength="12"></q-input>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn outline class="q-px-md" @click="submitUpdateLikeFolder"> 确认</q-btn>
        </q-card-actions>
      </q-card>


    </q-dialog>
  </div>

</template>

<script>
import {

    loadEffectLikeFolderList,
    createEffectLikeFolder,
    updateEffectLikeFolder,
    removeEffectLikeFolder
} from "assets/api/studio/effect"
export default {
    name: 'LikefolderTree',
    props: {},
    data() {
        return {
            folderLikeList: [{
                elf_id: 0,
                name: '全部',
                children: [],
                icon: 'mdi-folder-outline'
            }],
            likeFolderSelected: 0,
            curLikeFolder: {
                elf_id: 0,
                name: '全部',
            },
            curLikeFolderPath: [{
                elf_id: 0,
                name: '全部',
            }],
            renameFolderName: '',
            newFolderName: '文件夹',
            isCreateLikeFolderDialog: false,
            isRenameLikeFolderDialog: false,
        }
    },
    mounted(){
      this.handleLoadLikeFolderList()
    },
    methods: {
        handleLoadLikeFolderList() {
            loadEffectLikeFolderList().then(res => {
                if (res.data.code == 1) {
                    let data = res.data.data;
                    if (data.length > 0) {
                        function getTrees(data) {

                            data.forEach((v, i, arr) => {
                                // v：儿子

                                arr.forEach((v1, y) => {
                                    v1.icon = "mdi-folder-outline"

                                    // v1：父亲
                                    // v1.tickable = false;
                                    // v1.selectable = false;
                                    if (v1.elf_id == v.parent_id) {
                                        // 父亲找到儿子了，就添加到children
                                        if (!v1.children) v1.children = []
                                        v1.children.push(v)
                                    }
                                })
                            })
                            return data
                        }
                        var newData = getTrees(data).filter((v) => v.parent_id == 0)

                    } else {
                        var newData = []
                    }
                    this.folderLikeList[0].children = newData

                    setTimeout(() => {
                        this.$refs.likeFolderTree.expandAll()

                    }, 500);

                }
            })
        },
        handleLikeFolderSelected() {
            let tree = this.$refs.likeFolderTree;
            var arr = []
            if (this.likeFolderSelected != 0) {
                function getPath(elf_id) {

                    let obj = tree.getNodeByKey(elf_id)
                    arr.unshift(obj)

                    if (obj.parent_id != 0) {

                        getPath(obj.parent_id)
                    } else {
                        arr.unshift({
                            elf_id: 0,
                            name: '全部',
                        })
                    }
                }
                getPath(this.likeFolderSelected)

            } else {
                arr = [{
                    elf_id: 0,
                    name: '全部',
                }]

            }
            this.curLikeFolder = tree.getNodeByKey(this.likeFolderSelected)
            this.curLikeFolderPath = arr;
            this.$emit('update',this.likeFolderSelected)
            this.$emit('curFolder',this.curLikeFolder,this.curLikeFolderPath)

        },
        handleLikeSelect(id) {
            this.likeFolderSelected = id
            this.handleLikeFolderSelected()
        },
        handleRenameLikeFolder() {
            this.isRenameLikeFolderDialog = true;
            this.renameFolderName = this.curLikeFolder.name
            this.handleLikeFolderSelected()
            //console.log(this.curLikeFolder);
        },
        submitUpdateLikeFolder() {
            updateEffectLikeFolder({
                name: this.renameFolderName,
                elf_id: this.curLikeFolder.elf_id

            }).then(res => {
                if (res.data.code == 1) {
                    this.isRenameLikeFolderDialog = false;

                    this.$message.success('重命名成功！')
                    this.curLikeFolder.name = this.renameFolderName

                } else {
                    this.$message.error('重命名失败！')
                }
            })
        },
        handleCreateLikeFolder() {
            this.isCreateLikeFolderDialog = true;
            this.handleLikeFolderSelected()
            //console.log(this.curLikeFolder);
        },
        submitCreateLikeFolder() {
            createEffectLikeFolder({
                name: this.newFolderName,
                parent_id: this.curLikeFolder.elf_id
            }).then(res => {
                if (res.data.code == 1) {
                    this.isCreateLikeFolderDialog = false;
                    this.newFolderName = '文件夹'
                    this.$message.success('创建文件夹成功！')
                    this.handleLoadLikeFolderList();

                } else {
                    this.$message.error('创建文件夹失败！')
                }
            })
        },
        handleDeleteLikeFolder() {
            var vm = this;
            this.$q.dialog({
                dark: true,
                title: '提示',
                message: '删除该文件夹也会删除其中的内容，是否删除？',
                cancel: true,
            }).onOk(() => {

                removeEffectLikeFolder({
                    elf_id: this.curLikeFolder.elf_id
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        vm.$message.success('删除成功！')
                        vm.handleLikeSelect(0)
                        vm.handleLoadLikeFolderList()
                    } else {
                        vm.$message.error('删除失败！')
                    }
                })
                // deletePlanEvent({
                //     pid: this.pid,
                //     plan_id: ob.event.id
                // }).then(res => {
                //     ob.event.remove();
                //     vm.handleLoadPlanList()
                // })
            }).onCancel(() => {
                // //console.log('Cancel')
            }).onDismiss(() => {
                // //console.log('I am triggered on both OK and Cancel')
            })
        },
    }
}
</script>

<style>

</style>
